<template>
	<view>
		<view class="shopsd">
			<view class="xian"></view>
			<view class="shopTop">亦媛 18388888888</view>
			<view class="shopBot">
				<view class="">地址：江苏省徐州市某某某某</view>
				<image src="../../static/images/arrow_right.png" mode=""></image>
			</view>
		</view>
		<view class="heads">
			<view class="box-l">备注:</view>
			<view class="box-r">
				<input type="text" placeholder="请输入填写留言"/>
			</view>
		</view>
		
		<view class="shop">
			<view class="shopTop">
				<view class="">
					商品总数: 67
				
				</view>
				<view class="">
					<text class="blue">全部展开</text>
					<image src="../../static/images/arrow_down.png" mode=""></image>
				</view>
			</view>
		</view>
		
		<!-- 商品 -->
		<view class="shopCenter">
			<image src="../../static/images/201916541220.jpg" mode=""></image>
			<view class="bot">
				<view class="botTop">
					<view class="botLeft">苹果</view>
					<view class="botRight hui"></view>
				</view>
				<view class="botTop" style="margin-top: 53rpx;">
					<view class="botLeft">
						总数量:2
						(<text>¥112.0</text>)
					</view>
					<view class="botRight blue" @click="ShowBox">
						{{ showZhan }}
						<image :src="zhanImage" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		
		<view class="box" v-show="Showbox">
			<view class="boxTop">
				<view class="boxLeft">规格</view>
				<view class="boxCenter">价格</view>
				<view class="boxRight">数量</view>
			</view>
			<view class="boxbot">
				<view class="boxLeft">大箱</view>
				<view class="boxCenter">¥12.00</view>
				<view class="boxRight">2</view>
			</view>
		</view>
		
		<view class="bott">
			<view class="bottLeft">
			合计:<text>¥365</text>
			<view class="four">
				（共3种，总数7）
			</view>
			</view>
			<view class="bottRight">
				提交订单
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			Showbox: false,
			showZhan: '展开',
			zhanImage: '../../static/slice/1.png'
		};
	},
	methods: {
		ShowBox() {
			if (this.Showbox) {
				this.showZhan = '展开';
				this.zhanImage = '../../static/slice/1.png';
				this.Showbox = false;
			} else {
				this.showZhan = '收起';
				this.zhanImage = '../../static/images/arrow_ondown.png';
				this.Showbox = true;
			}
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f7f4f8;
}
.shopsd {
	margin-top: 30rpx;
	padding-top: 40rpx;
	height: 173rpx;
	background-color: #ffffff;
	position: relative;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	box-sizing: border-box;
	.xian {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 5rpx;
		background: url(../../static/client/xian.png) no-repeat center;
		background-size: cover;
	}
	.shopTop {
		margin: 40rpx 31rpx;
		margin-top: 0;
		margin-bottom: 20rpx;
	}
	.shopBot {
		display: flex;
		justify-content: space-between;
		margin: 40rpx 31rpx;
		margin-top: 0;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
		image {
			width: 18rpx;
			height: 33rpx;
			position: relative;
			top: -20rpx;
		}
	}
}
.heads {
	height: 110rpx;
	line-height: 110rpx;
	background-color: #ffffff;
	margin-top: 30rpx;
	display: flex;
	padding: 0 30rpx;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 500;
	position: relative;
	image {
		width: 18rpx;
		height: 33rpx;
		vertical-align: middle;
		margin-left: 20rpx;
	}
	.box-r {
		.box-l {
			position: absolute;
			left: 0;
		}
		input {
			width: 100%;
			text-align: left;
			height: 100%;
			overflow: hidden;
			padding-left: 20rpx;
			box-sizing: border-box;
		}
		.bx {
			position: absolute;
			right: 100rpx;
		}
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
	}
}

.shop {
	padding-left: 29rpx;
	padding-right: 29rpx;
	margin-top: 20rpx;
	background-color: #ffffff;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
	.shopTop {
		height: 100rpx;
		line-height: 100rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid #cccccc;
		image {
			width: 17rpx;
			height: 10rpx;
			margin-left: 10rpx;
		}
	}
}
.shopCenter {
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
	height: 211rpx;
	background-color: #ffffff;
	padding: 40rpx 34rpx;
	box-sizing: border-box;
	display: flex;
	image {
		width: 130rpx;
		height: 130rpx;
	}
	.bot {
		flex: 1;
		margin-left: 27rpx;
		.botTop {
			display: flex;
			justify-content: space-between;
			image {
				width: 17rpx;
				height: 10rpx;
				margin-left: 10rpx;
			}
		}
	}
}
.box {
	height: 212rpx;
	.boxTop {
		height: 100rpx;
		line-height: 100rpx;
		background-color: #eeeeee;
		display: flex;
		justify-content: space-evenly;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		border-bottom: 2rpx solid #cccccc;
	}
	.boxbot {
		height: 100rpx;
		line-height: 100rpx;
		display: flex;
		background-color: #eeeeee;
		color: #666666;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		justify-content: space-between;
		padding-left: 130rpx;
		padding-right: 160rpx;
		.boxCenter {
			position: relative;
			left: 30rpx;
		}
	}
}
.blue {
	color: #249af6;
}
text {
	color: #f64444;
}
.bott{
	height: 98rpx;
	width: 100%;
	position: fixed;
	bottom: 0;
	background-color: #FFFFFF;
	display: flex;
	.bottLeft{
		width: 521rpx;
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(102,102,102,1);
		display: flex;
		line-height: 98rpx;
		margin-left: 32rpx;
		text{
			font-size:36rpx;
			font-family:PingFang SC;
			font-weight:500;
		}
		.four{
			font-size:22rpx;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(102,102,102,1);
		}
	}
	.bottRight{
		flex: 1;
		line-height: 98rpx;
		background-color:#F93C45FF;
		text-align: center;
		font-size:30rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(255,255,255,1);
	}
	
}
</style>
